<!DOCTYPE html>  
<html lang="zh">  
<head>  
<meta charset="UTF-8">  
<title>二十四节气与月份天数</title>  
<!-- <style>  
    table {  
        width: 100%;  
        /* border-collapse: collapse;   */
    }  
    td {  
        text-align: center;  
        padding: 10px; 
        background-color: #77be04; 
        border: 1px solid #afd310;  
        position: relative; /* 为提示信息定位做准备 */  
    }  
    .tooltip {  
        display: none; /* 默认不显示 */  
        position: absolute;  
        top: 100%; /* 出现在元素上方 */  
        left: 50%;  
        transform: translateX(-50%); /* 居中对齐 */  
        background-color: #0dca8b94;  
        border: 1px solid #77be04;  
        padding: 5px;  
        border-radius: 5px;  
        z-index: 1;  
    }  
    td:hover .tooltip {  
        display: block; /* 鼠标悬停时显示 */  
    }  
</style>   -->
 
<style>  
    body {  
        font-family: Arial, sans-serif;  
    }  
    table {  
        width: 100%;  
        border-collapse: collapse;  
        margin: 20px 0;  
    } 
    tr{
        width: 100px;
    } 
    th, td {  
        text-align: center;  
        padding: 10px;  
        border: 1px solid #ddd;  
        position: relative;  
    }  
    th {  
        background-color: #f2f2f2;  
    }  
    .tooltip {  
        display: none;  
        position: absolute;  
        top: 100%;  
        left: 50%;
        width: 200px;
        /* height: 200px;   */
        transform: translateX(-50%);  
        background-color: #f9f9f9;  
        border: 1px solid #ddd;  
        padding: 5px 10px;  
        border-radius: 5px;  
        z-index: 1;  
       /* white-space: nowrap; /* 防止文本换行 */  
    }  
    td:hover .tooltip {  
        display: block;  
    }  
    /* 可选：为表格添加一些阴影效果 */  
    table {  
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
    }  
</style>  
</head>  
<body>  
  
<h2>二十四节气与月份天数</h2>  
  
<table>  
      
<table>  
    <tr>  
        <td>立春<span class="tooltip">2月3-5日适合种植的作物:萝卜、南瓜、辣椒、芹菜、土豆、生菜、上海青、葱等</span></td>  
    </tr>
    <tr>
        <td>雨水<span class="tooltip">2月18-20日适合种植的作物:稻谷、玉米、小麦、豆类（如大豆、花豆、豇豆）、水蜜桃、草莓、西瓜等</span></td>  
    </tr>
    <tr>
        <td>惊蛰<span class="tooltip">3月5-7日适合种植的作物:番茄、辣椒、茄子、白菜、萝卜、胡萝卜、豆角、生菜、大蒜、土豆、棉花、豆类等</span></td>  
    </tr>
    <tr>
        <td>春分<span class="tooltip">3月20-22日适合种植的作物:矮牵牛、宇宙、观赏辣椒、观赏南瓜、茉莉、葱、豆类、棉花等</span></td>  
    </tr>
    <tr>
        <td>清明<span class="tooltip">4月4-6日适合种植的作物:黄瓜、豆角、番茄、丝瓜、冬瓜、苦瓜、梅豆、小青菜、豌豆等</span></td>  
    </tr>
    <tr>
        <td>谷雨<span class="tooltip">4月19-21日适合种植的作物:烟草、棉花、玉米、莲藕、芡实、红薯等</span></td>  
    </tr>  
    <tr>  
        <td>立夏<span class="tooltip">5月5-7日适合种植的作物:莴笋、黄瓜、豆类等</span></td>  
        <td>小满<span class="tooltip">5月20-22日适合种植的作物:大葱、花生等</span></td>  
        <td>芒种<span class="tooltip">6月5-7日适合种植的作物:红薯、玉米、豆类等</span></td>  
    </tr>  
    <tr>  
        <td>夏至<span class="tooltip">6月21-22日适合种植的作物:苋菜、黄瓜、丝瓜等</span></td>  
        <td>小暑<span class="tooltip">7月6-8日适合种植的作物:甘蓝、豆类等</span></td>  
        <td>大暑<span class="tooltip">7月22-24日适合种植的作物:芹菜、丝瓜、豆类等</span></td>  
    </tr>  
    <tr>  
        <td>立秋<span class="tooltip">8月7-9日适合种植的作物:白菜、豆类、瓜果等</span></td>  
        <td>处暑<span class="tooltip">8月22-24日适合种植的作物:胡萝卜、豆类、瓜果等</span></td>  
        <td>白露<span class="tooltip">9月7-9日适合种植的作物:香菜、菠菜、豆类等</span></td>  
    </tr>  
    <tr>  
        <td>秋分<span class="tooltip">9月22-24日适合种植的作物:香葱、豆类、瓜果等</span></td>  
        <td>寒露<span class="tooltip">10月8-9日适合种植的作物:	萝卜、菠菜、豆类等</span></td>  
        <td>霜降<span class="tooltip">10月23-24日适合种植的作物:菠菜、豆类、油菜等</span></td>  
    </tr>  
    <tr>  
        <td>立冬<span class="tooltip">11月7-8日适合种植的作物:蒜苗、豌豆等</span></td>  
        <td>小雪<span class="tooltip">11月22-23日适合种植的作物:豌豆、油菜等</span></td>  
        <td>大雪<span class="tooltip">12月6-8日适合种植的作物:油菜、菠菜、蚕豆等</span></td>  
    </tr>  
    <tr>  
        <td>冬至<span class="tooltip">12月21-23日适合种植的作物:茼蒿、豌豆等</span></td>  
        <td>小寒<span class="tooltip">1月5-7日不适合种植作物</span></td>  
        <td>大寒
            <div class="tooltip">
                <p>1月20-21日(次年)不适合种植作物</p>
                
            </div>
        </td>  
    </tr>  
</table>  
  
    <!-- 假设这里只展示了一行，实际可以根据需要调整 -->  
</table>  
  
</body>  
</html>